<template>
  <n-card title="典型案例库">
    <n-space vertical>
      <n-alert type="info">
        查看和学习成功案例
      </n-alert>
      <n-grid :cols="2" :x-gap="16" :y-gap="16">
        <n-gi v-for="caseItem in cases" :key="caseItem.id">
          <n-card :title="caseItem.title" hoverable>
            <p>{{ caseItem.description }}</p>
            <template #footer>
              <n-tag :type="caseItem.type">{{ caseItem.tag }}</n-tag>
            </template>
          </n-card>
        </n-gi>
      </n-grid>
    </n-space>
  </n-card>
</template>

<script setup>
import { ref } from 'vue'
import { NCard, NSpace, NAlert, NGrid, NGi, NTag } from 'naive-ui'

const cases = ref([
  { id: 1, title: '电缆网络优化', description: '通过AI智能体提升用电效率20%', tag: '成功案例', type: 'success' },
  { id: 2, title: '数据分析报告', description: '自动生成业务数据分析报告', tag: '典型案例', type: 'info' },
  { id: 3, title: '智能推荐系统', description: '基于用户行为的个性化推荐', tag: '创新案例', type: 'warning' },
  { id: 4, title: '流程自动化', description: '业务流程自动化，节省人力成本', tag: '效率提升', type: 'success' }
])
</script>